<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" id="html">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport"	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
<base href="<?= base_url(1); ?>" />
<link type="text/css" href="css/buglist.css?v=<?= $config['version'] ?>" rel="stylesheet" />

<script type="text/javascript"	src="<?= $config['res_url'] ?>/js/jquery.min.js?ver=<?= $config['version'] ?>"></script>
<script type="text/javascript"	src="<?= $config['res_url'] ?>/js/jquery.datepicker.js?ver=<?= $config['version'] ?>"></script>
<script type="text/javascript"	src="<?= $config['res_url'] ?>/js/jquery.colorpicker.js?ver=<?= $config['version'] ?>"></script>
<script type="text/javascript"	src="<?= $config['res_url'] ?>/js/jquery.autocomplete.js?ver=<?= $config['version'] ?>"></script>
<script type="text/javascript"	src="<?= $config['res_url'] ?>/js/jquery.flexigrid.js?ver=<?= $config['version'] ?>"></script>
<script type="text/javascript"	src="<?= $config['res_url'] ?>/js/jquery.dialog.js?ver=<?= $config['version'] ?>"></script>
<script type="text/javascript"	src="<?= $config['res_url'] ?>/js/jquery.multiselect.js?ver=<?= $config['version'] ?>"></script>
<script type="text/javascript"	src="<?= $config['res_url'] ?>/js/jquery.drop.js?ver=<?= $config['version'] ?>"></script>
<script type="text/javascript"	src="<?= $config['res_url'] ?>/js/jquery.drag.js?ver=<?= $config['version'] ?>"></script>
<script type="text/javascript"	src="<?= $config['res_url'] ?>/js/base.js?ver=<?= $config['version'] ?>"></script>
<script type="text/javascript"	src="<?= $config['res_url'] ?>/js/jquery.formvalidator.js"></script>
	
<script language="javascript">

		//自动提示
		function countArea(obj, maxlimit)
		{
			//alert("maxlimit:"+maxlimit);
		  	//var len = byteLength(obj.value);
		  	var len = obj.value.length;
		  	//alert("len:"+len);
		 	if(len > maxlimit) {
		 		document.getElementById('shurutishi').innerHTML = "已超出 <b style='color:red'>"+parseInt((len-maxlimit+1))+"</b> 个字";

		   	} else {
		 		document.getElementById('shurutishi').innerHTML = "还可输入 <b>"+parseInt((maxlimit-len))+"</b> 个字";
		 	}
		}

		//统计字符个数
		function byteLength (sStr) {
			//alert("str:"+sStr);
		 aMatch = sStr.match(/[^\x00-\x80]/g);
		 return (sStr.length + (! aMatch ? 0 : aMatch.length));
		}	

		//去掉左右空格 
		String.prototype.Trim = function()
		{
			return this.replace(/(^s*)|(s*$)/g, "");
		}
		String.prototype.LTrim = function()
		{
			return this.replace(/(^s*)/g, "");
		}
		String.prototype.RTrim = function()
		{
			return this.replace(/(s*$)/g, "");
		}

		 function trim(str){ //删除左右两端的空格
		　　     return str.replace(/(^s*)|(s*$)/g, "");
		　　 }
		function ltrim(str){ //删除左边的空格
		　　     return str.replace(/(^s*)/g,"");
		　　 }
		function rtrim(str){ //删除右边的空格
		　　     return str.replace(/(s*$)/g,"");
		　　 }

		$(document).ready(function() {

			//点击了主界面中的提交输入框
			$("#subanswerbut").click(function() {
				
				//alert("Hello world!");
				$("#newmainview").hide();
				$("#subpage").show();
				$("#detailpage").hide();
			});

			//点击了主界面中的提交图片			
			$("#subanswerimg").click(function() {
				
				//alert("Hello world!");
				$("#newmainview").hide();
				$("#subpage").show();
				$("#detailpage").hide();
			});

			//点击主界面 中的 已完成
			$("#yihuida").click(function() {				
				//alert("Hello world!");
				$("#newsubunanswer").hide();
				$("#newsubanswer").show();	

				$('#yihuida').attr('className','selectTag');
				$('#weihuida').attr('className','rightnotselectTag');	
					
			});
			
			//点击主界面 中的 未完成
			$("#weihuida").click(function() {				
				//alert("Hello world!");
				$("#newsubunanswer").show();
				$("#newsubanswer").hide();	

				$('#weihuida').attr('className','selectTag');
				$('#yihuida').attr('className','leftnotselectTag');
											
			});

			
			//点击了提交界面中的关闭按钮
			$("#colsesub").click(function() {
				
				//alert("Hello world!");
				$("#newmainview").show();
				$("#subpage").hide();
				$("#detailpage").hide();
			});

			//点击了提交界面中的提交按钮
			$("#tiwen").click(function() {
				
				//alert("Hello world!");
				var question = $("#question").val();
				var phone = $("#phone").val();
				var mail = $("#mail").val();
				
				if(question==""	||trim(question)=="")
				{
					alert("您还没有输入您的问题哦！");
					return false;
				}else if(trim(question).length > 256)
				{
					alert("亲，你输入的字数太长了！");
					return false;
				}
				else	
				{
					document.form1.submit();
					return true;
				}
			});

			//点击了详情页面中的关闭按钮
			$("#detailcolse").click(function() {
				
				//alert("Hello world!");
				$("#newmainview").show();
				$("#subpage").hide();
				$("#detailpage").hide();
			});

			
			//表单验证
			$("#phone").blur(function() {
				var str= trim($("#phone").val());
				//alert('phone blur str = '+str );
				if(str.length == 0)
				{
					//alert('l = 0 str = '+str);
					return true;
				}
				//alert('str = '+str);
				var patten = /(^[0-9]{3,4}-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^([0-9]{3,4})[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/;
				if( !patten.test(str))
				{
					alert("亲，电话号码的格式不对，请重新输入");
					$("#phone").foucs();
					return false;
				}				
			});
			
			//表单验证
			$("#mail").blur(function() {
				var str= trim($("#mail").val());
				
				if(str.length == 0)
				{
					//alert('l = 0 str = '+str);
					return true;
				}
				//alert('str = '+str);
				var reg = /^[a-zA-Z0-9_-]+(\.([a-zA-Z0-9_-])+)*@[a-zA-Z0-9_-]+[.][a-zA-Z0-9_-]+([.][a-zA-Z0-9_-]+)*$/;
				if( !reg.test(str))
				{
					alert("亲，邮件的格式不对，请重新输入");
					$("#mail").foucs();
					return false;
				}				
				return true;
			});
			
		});

		//查看详情
		function seedetail(id)
		{
			//alert("id="+id);
			$("#newmainview").hide();
			$("#subpage").hide();
			$("#detailpage").show();
			//alert('id = '+id);
			
			var allQuestion = <?=json_encode($mydata[0])?>;
			//alert('question = '+allQuestion[id]['question']+' huifu = '+allQuestion[id]['answer']
			//	+' createtime = '+allQuestion[id]['createtime']+' replaytime = '+allQuestion[id]['replaytime']);
			//alert('cratetime = '+allQuestion[id]['cratetime']);
			console.log('question = '+allQuestion[id]['question']+' huifu = '+allQuestion[id]['answer']
			+' createtime = '+allQuestion[id]['createtime']+' replaytime = '+allQuestion[id]['replaytime']);
			
			$("#detailwenti").html(allQuestion[id]['question']);
			$("#detailhuifu").html(allQuestion[id]['answer']);
			$("#detailcreatetime").html(allQuestion[id]['createtime']);
			$("#detailreplaytime").html(allQuestion[id]['replaytime']);
		}

		//截取字符串
		function getstr(str)
		{
			//alert('str = '+str);
			if(str.length > 10)
			{
				//alert(' before = '+str);
				str = str.substr(0,10)+"...";
				//alert(' after = '+str);
			}
			return str;
		}

	
</script>

</head>
<!-- 780*435 -->
<body id="mybody">
<?php
$allQuestion = $mydata[0];
$resolvedQuestion = $mydata[1];
$unresolvedQuestion = $mydata[2];

//echo "all:";
//var_dump($allQuestion);
//echo "resolved:";
//var_dump($resolvedQuestion);
//echo "unresolved:";
//var_dump($unresolvedQuestion);

?>

<!-- 重新设定主界面 -->
<div id="newmainview">
	
	<!-- 最上面的图片 -->
	<div align="center" >
	    <img src="<?= $config['images_url'] ?>/buglist/banner.png" width="100%" alt="我的问题列表"/>
		   	<div id="subanswer"><input id="subanswerbut" type='text' placeholder="请在此输入您的问题">
			    	<span style="position: relative; top: 20px; left: 0px;">
				    <img id="subanswerimg" src="<?= $config['images_url'] ?>/buglist/enter_button.png" width="69" height="57" alt="点击这可以提问">
				    </span> 
			</div>
	</div>
	
	<div id="biaoqian">
	<table width="90px" border="0" cellspacing="0" cellpadding="0">
	<tr><td>
	<div id="yihuida" class="selectTag"><font style="font-size: 21px" >已回答</font></div></td><td>
	<div id="weihuida" class='rightnotselectTag'><font style="font-size: 21px" >未回答</font></div>
	</td></tr>
	</table>
	</div>
	
	<table id="newsubanswer">
		<tr style="font-size: 21px">
			<td>&nbsp;问题内容</td>
			<td>&nbsp;提交时间</td>
			<td>&nbsp;状态</td>
			<td>&nbsp;查看</td>
		</tr>
	
		<!-- 已回答的问题 -->
	
		<?php foreach ($resolvedQuestion as $key => $value) { ?>
		<tr>
			<td onClick="seedetail(<?=$key ?>)">&nbsp; <font color=#00FF00> <script>
	        	    var str = getstr("<?=($value['question']) ?>")
	        	    document.write(str);
	        	    </script> </font></td>
	
			<td>&nbsp;<font color=#FFFFff><?=$value['createtime'] ?></font></td>
			<td>&nbsp;<img src="<?= $config['images_url'] ?>/buglist/answer.png" width="19" height="16" alt="已回答"></td>
			<td>&nbsp;<img src="<?= $config['images_url'] ?>/buglist/see.png"	width="26" height="26" alt="查看" onClick="seedetail(<?=$key ?>)"></td>
		</tr>
		
		<?php }?>
	
	</table>
	
	<table id="newsubunanswer" style="display:none">
		<tr style="font-size: 21px">
			<td>&nbsp;问题内容</td>
			<td>&nbsp;提交时间</td>
			<td>&nbsp;状态</td>
			<td>&nbsp;查看</td>
		</tr>
		<!-- 未解决的问题 -->
		<?php foreach ($unresolvedQuestion as $key => $value) { ?>
		<tr>
			<td onClick="seedetail(<?=$key ?>)">&nbsp; <font color=#FFFF00> <script>
	        	     	var str = getstr("<?=($value['question']) ?>")
	            	    document.write(str);
	        	    	</script> </font></td>
			<td>&nbsp;<font color=#FFFFff><?=$value['createtime'] ?></font></td>
			<td>&nbsp;<img src="<?= $config['images_url'] ?>/buglist/unanswer.png"	width="19" height="16" alt="未回答"></td>
			<td>&nbsp;<img src="<?= $config['images_url'] ?>/buglist/see.png" width="26" height="26" alt="查看" onClick="seedetail(<?=$key ?>)"></td>
		</tr>
		
		<?php }?>
	</table>
</div>

<!-- 第二个提问界面 -->
<div id = "subpage" style="display:none">
	
	<form id="form1" name="form1"	action="<?= site_url("buglist/playerbug/submit") ?>" method="POST">
		<table width = 100%>
         <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
         <tr><td colspan="2" style="font-size:21px">&nbsp;问题反馈</td></tr>
        <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
        <tr>
        <td colspan="2">
        <!--  
        <textarea cols="60" rows="6" name="row[question]" id="question"></textarea>
        -->
		<textarea name="question" id="question"  rows="5" placeholder="请输入您的问题"	value="" onKeyUp="countArea(this, 256)"></textarea>
		
        </td>
        </tr>
        
        <tr>
        <td colspan="2">
		<div id="shurutishi">还可以输入256个字</div>
        </td>
        </tr>
        
        <tr><td>
		<input name="phone" id="phone" type="text" placeholder="请输入您的号码"></td>
        <td><input type="text"  name="mail" id="mail" placeholder="请输入您的邮件"></td></tr>
        <tr><td>&nbsp;电话号码</td><td>&nbsp;电子邮件</td></tr>

		<tr><td>
        <a id="colsesub"><img src="<?= $config['images_url'] ?>/buglist/colsesub.png" alt="关闭"/></a>
		</td><td>
		<input name="tiwen" type="image" id="tiwen" src="<?= $config['images_url'] ?>/buglist/subbutton.png" alt="提问"	 />
		</td></tr>
		
		</table>
		
		<input name="platform" type="hidden" id="platform"	value="<?=$platform ?>"> 
		<input name="channel" type="hidden"	id="channel" value="<?=$channel ?>"> 
		<input name="account"	type="hidden" id="account" value="<?=$account ?>"> 
		<input name="area"	type="hidden" id="area" value="<?=$area ?>"> 
		<input name="roleid"	type="hidden" id="roleid" value="<?=$roleid ?>">
	</form>

</div>

<!-- 第三个页面-详情 -->
<div id="detailpage" style="display:none">
   <!-- style="table-layout:fixed " -->
  <table border="0" width=100% >
  	<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr><td colspan="2" style="font-size:21px">&nbsp; 问题详情</td></tr>
    <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr>
      <td>&nbsp;问题</td>
      <td id = "detailwenti">&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;回复</td>
      <td id = "detailhuifu">&nbsp;</td>
    </tr>
    <tr>
      <td width=120px>&nbsp;提问时间</td>
      <td id = "detailcreatetime">&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;回复时间</td>
      <td id = "detailreplaytime">&nbsp;</td>
    </tr>

	 <tr><td colspan="2">
  	<a id="detailcolse"><img src="<?= $config['images_url'] ?>/buglist/colsesub.png" alt="关闭"></a>
  	</td></tr>
  	
	</table>
</div>

</body>
</html>
